<template>
  <div class="detail">
    <app-head title="" :whiteBack="false" :nonePos="true" :noneBg="false"></app-head>

    <div class="content">
      <div class="thumb" v-if="gameDetail.hot_image">
        <img class="thumb__img" :src="gameDetail.hot_image">
      </div>

      <div class="detail__head">
        <img class="detail__icon" :src="gameDetail.icon">
        <div class="detail__info">
          <strong class="detail__title">{{gameDetail.game_name}}</strong>
          <p class="detail__hot">
            <span v-if="gameDetail.classify !== 5">{{gameDetail.size}} · </span>
            {{gameDetail.down_cnt}}人{{gameDetail.classify === 5 ? '在玩' : '下载'}}
          </p>
        </div>
        <i class="detail__star" v-if="gameDetail.classify !== 5">{{gameDetail.star_cnt}}</i>
      </div>
      <div class="detail__tags">
        <label class="detail__tag" v-for="(item, index) in gameDetail.type" :key="index">{{item}}</label>
      </div>
    </div>

    <div class="content">
      <div class="content__title">游戏简介</div>
      <div class="detail__banner" v-if="gameDetail.image">
        <img class="detail__banner_img" :src="item.url" v-for="(item, index) in gameDetail.image" :key="index">
      </div>
      <div class="content__text" v-html="gameDetail.desc.replace(/\n/g, '<br>')" v-if="gameDetail.desc"></div>
    </div>

    <div class="content" v-if="gameDetail.serlist&&gameDetail.serlist.list.length>0">
      <div class="content__title">开服</div>
      <div class="server__list">
        <span :class="['server__item', { 'active': dateFormat(item.start_time, 'yyyy/MM/dd') === dateFormat(new Date().getTime() / 1000, 'yyyy/MM/dd') }]" v-for="(item, index) in gameDetail.serlist.list" :key="index">{{item.server_name}} {{dateFormat(item.start_time, 'MM/dd hh:mm')}}</span>
      </div>

      <GiftList :title="false" :content="giftlist" v-if="gameDetail.gift && gameDetail.gift.length" :icon="true"/>
    </div>

    <div class="detail__foot">
      <button class="detail__btn item__btn" data-clipboard-action="copy" :data-clipboard-text="gameDetail.huoagentcode" @click.prevent="playInstall(gameDetail.down_url, gameDetail.classify === 5)">{{gameDetail.classify === 5 ? '去玩' : '下载'}}</button>
    </div>
    <div class="dialog dialog_close" v-if="dialogShow"></div>
    <div class="dialog_boxa" v-if="dialogBoxShow">
        <p class="dialog_box_close dialog_close"><span @click="maskClick">取消</span></p>
        <p class="dialog_box_message">安装时<span>点击"允许"</span>，请勿点击"忽略"</p>
        <p class="dialog_box_btn item__btn" data-clipboard-action="copy" :data-clipboard-text="gameDetail.huoagentcode" @click="download(gameDetail.down_url)"><span>安装{{gameDetail.gamename}}</span></p>
        <p class="dialog_box_video" @click="playVideo"><img src="@/assets/img/video_icon.png" alt=""><span>观看安装视频教程</span></p>
    </div>
    <div class="dialog_udid" v-if="dialogInitShow">
        <p class="dialog_udid_title">正在准备安装包，预计还有20秒</p>
        <p class="dialog_udid_gif"><img src="@/assets/img/uuid_loding.gif" alt=""></p>
        <p class="dialog_udid_msg">uuid:<span>{{udidData || ''}}</span></p>
    </div>
    <div class="dialog_install" v-if="dialogInstallShow">
        <p class="dialog_install_now"><img src="@/assets/img/down_load.gif" alt=""></p>
        <p class="dialog_install_progess">返回桌面查看安装进度</p>
        <p class="dialog_install_msg">*正在安装中，请勿关闭该页面</p>
        <p class="dialog_install_btn dialog_close" @click="maskClick(true)"><span>我知道了</span></p>
        <p class="dialog_install_udid">UDID：<span>{{udid}}</span></p>
    </div>
    <div class="video_box" v-if="videoShow">
        <p @click="closeVideo">点击退出</p>
        <video id="movie" ref="video" class="movie" :src="videoUrl" controls="controls"></video>
    </div>
  </div>
</template>

<script>
import axios from '../../api'
import { mapGetters } from 'vuex'
import GiftList from '@/components/gift/List'
export default {
  name: 'gameDetail',
  data(){
    return {
      dialogShow:false,
      dialogBoxShow:false,
      dialogInstallShow:false,
      videoShow:false,
      isIos:'',
      videoUrl:'',
      config:1,
      dialogInitShow:false,
      timeload:false,
      timeloadNum:20,
      udidType:false,
      udidData:'',
      giftlist:[]
    }
  },
  components: {
    GiftList
  },
  computed: {
    ...mapGetters([
      'userinfo',
      'gameDetail',
      'playIndex'
    ])
  },
  watch: {
    gameDetail(val){
      if(!!val.cp_id){
        let list=[];
        if (this.gameDetail.gift) {
          list.push({
            gift_list: this.gameDetail.gift
          })
        }
        console.log(val);
        this.giftlist=list;
        if(val.classify!==5){
          let ua = navigator.userAgent;
          this.isIos = /iPhone|iPad|iPod/.test(ua);
          if(this.getCookie('first')==2 || !!localStorage.getItem('url')){
            if(this.isIos){
              this.httpserve(this.gameDetail.down_url);
              this.dialogShow=true;
              this.dialogInitShow=true;
            }
          }
        }
      }
    }
  },
  methods: {
    setCookie(name,value) {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    },
    getCookie(name) {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    　　return (arr=document.cookie.match(reg))?unescape(arr[2]):null;
    },
    getIosVersion(){
        var ua = navigator.userAgent.toLowerCase();
        var version = null;
        if (ua.indexOf("like mac os x") > 0) {
            var reg = /os [\d._]+/gi;
            var v_info = ua.match(reg);
            version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
            version = parseInt(version.split('.')[0]) + '.' + parseInt(version.split('.')[1]);
        }
        return version;
    },
    tabChange (index) {
      this.active = index
    },
    // 关闭下载弹窗
    maskClick(){
      if(!udidType){
        this.dialogShow=false;
        this.dialogBoxShow=false;
        this.dialogInstallShow=false;
      }else{
        return false;
      }
    },
    myBrowser() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "Firefox";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
    },
    // 点击下载/玩游戏
    playInstall(link,type){
      // if (window.localStorage.getItem('loginFlag') == 1) {
      //   HuoSdk.login()
      //   return false
      // }
      let clipboard = new this.clipboard('.item__btn')
      if(!type){
        if(this.isIos){
          if(this.myBrowser()=='Safari'){
            this.dialogShow=true;
            this.dialogBoxShow=true;
          }else{
            this.$store.commit('SET_POP_STATUS', {
              type: 'wxGuideIshow',
              show: true
            })
            return false
          }
        }else{
          window.location.href=link;
        }
      }else{
         window.location.href=link;
      }
    },
    download(link){
      this.httpserve(link);
    },
    // 超级签接口请求
    httpserve(link){
      let agent_id=0;
      if(!!this.gameDetail.agent_id){
        agent_id=this.gameDetail.agent_id
      }
      let { id } = this.$route.query
      axios.superDownUrl({
        app_id: id,
        agent_id:agent_id
      }, data => {
        let _this=this;
        if(55014==data.code){
          _this.setCookie('first',2);
          if(!!data.data.url && data.data.profile_url){
            location.href = data.data.url;
            var OsVersion = _this.getIosVersion();
            if (OsVersion >= 12) {
                setTimeout(function () {
                    window.location.href = data.data.profile_url;
                }, 1000);
            }
          }
           _this.udidType=true;
        }else if(55013==data.code){
          //正在签名中，每隔5秒再请求一次当前接口
          _this.dialogShow=true;
          _this.dialogBoxShow=false;
          _this.dialogInitShow=true;
          _this.udidType=false;
          if(!_this.setTimeType){
              setTimeout(()=>{
                  _this.httpserve(link);
              },5000)
          }
          if(!_this.timeload){
            _this.timeload=true;
            setTimeout(()=>{
                if(_this.timeloadNum>0){
                    $('.dialog_udid_title').html('正在准备安装包，预计还有'+_this.timeloadNum+'秒')
                }
                _this.timeloadNum--;
            },1000)
          }
        }else if(data.code==200){
          _this.setCookie('first','');
          if(_this.config==1){
              _this.config=2;
              _this.dialogShow=true;
              _this.dialogInstallShow=true;
              _this.dialogInitShow=false;
              _this.udidType=true;
              _this.udidData=data.data.udid;
              if(!!data.data.url){
                window.location.href = data.data.url;
              }
              localStorage.setItem('url',data.data.url);
              localStorage.setItem('udid',data.data.udid)
          }else{
              window.location.reload();
          }
        }else if(data.code==55016){
          if(!!data.data.url){
            window.location.href = data.data.url;
          }
        }
      })
    },
    // 播放视频
    playVideo(){
      this.videoShow=true;
      this.videoUrl=this.gameDetail.install_video_url;
      this.$nextTick(()=>{
         this.$refs.video.play()
      })
    },
    // 退出视频
    closeVideo(){
      this.videoShow=false;
      this.videoUrl='';
    }
  },
  mounted () {
    let { id } = this.$route.query
    if (id) {
      this.$store.dispatch('getGameDetail', {
        game_id: id
      })
    }
    this.$store.commit('GET_GAME_DETAIL', { data: {} })
  }
}
</script>

<style scoped lang="scss">
.detail {
  padding-bottom: 0.49rem;

  &__head {
    align-items: center;
    display: flex;
    padding: 0.18rem 0.15rem 0.1rem;
  }

  &__icon {
    border-radius: 0.15rem;
    height: 0.8rem;
    margin-right: 0.14rem;
    width: 0.8rem;
  }

  &__info {
    flex: 1;
  }

  &__title {
    font-size: 0.18rem;
    font-weight: bold;
  }

  &__hot {
    color: #999;
    font-size: 0.11rem;
    margin-top: 0.05rem;
  }

  &__star {
    background-image: url(../../assets/img/icon_star.png);
    background-position: left 0.03rem;
    background-repeat: no-repeat;
    background-size: 0.16rem 0.16rem;
    color: #FF7920;
    font-size: 0.16rem;
    font-weight: bold;
    line-height: 0.24rem;
    margin-bottom: 0.1rem;
    padding-left: 0.2rem;
    width: 0.36rem;
  }

  &__banner {
    margin: 0 0.1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    &_img {
      height: 1.7rem;
      margin: 0 0.04rem;
      width: 1.1rem;
    }
  }

  &__foot {
    background-color: #fff;
    bottom: 0;
    box-shadow: 0 -0.01rem 0.04rem 0 rgba(0, 0, 0, 0.1);
    height: 0.49rem;
    left: 0;
    padding: 0.06rem 0.24rem;
    position: fixed;
    width: 100%;
  }

  &__btn {
    background-color: #FF7920;
    border-radius: 0.19rem;
    color: #fff;
    display: block;
    font-size: 0.18rem;
    font-weight: bold;
    height: 100%;
    width: 100%;
  }

  &__tags {
    padding: 0.05rem 0.15rem;
  }

  &__tag {
    background: #FAFAFA;
    border: 1px solid #D4D4D4; /* no */
    border-radius: 0.05rem;
    color: #999;
    display: inline-block;
    font-size: 0.12rem;
    font-weight: bold;
    height: 0.24rem;
    line-height: 0.24rem;
    margin: 0 0.07rem 0.05rem 0;
    padding: 0 0.09rem;
  }
}

.thumb {
  height: 2.5rem;
  margin-top: -0.5rem;
  overflow: hidden;

  &__img {
    width: 100%;
    height: 100%;
  }

  & + .detail__head {
    margin-top: -0.18rem;
    padding-top: 0;

    .detail__info {
      padding-top: 0.18rem;
    }

    .detail__star {
      margin-top: 0.18rem;
    }
  }
}

.tab {
  border-bottom: 1px solid #F0F0F0; /* no */
  margin: 0 0.15rem;
}

.content {
  border-bottom: 0.1rem solid #f2f2f2;

  &__title {
    font-size: 0.16rem;
    font-weight: bold;
    padding: 0.1rem 0.15rem;
  }

  &__text {
    color: #707070;
    font-size: 0.14rem;
    padding: 0.1rem 0.15rem;
  }
}

.server {
  &__list {
    padding: 0 0.09rem 0.15rem;
  }

  &__item {
    background-color: #F2F2F2;
    border-radius: 0.18rem;
    color: #666;
    display: inline-block;
    font-size: 0.12rem;
    height: 0.36rem;
    line-height: 0.36rem;
    margin: 0.08rem 0.06rem;
    text-align: center;
    width: 1.65rem;

    &.active {
      background-color: #FF8600;
      color: #fff;
    }
  }
}
.dialog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  opacity: 0.6;
  z-index: 10;
}
.dialog_boxa{
  position: fixed;
  width: 3.55rem;
  height: 2.17rem;
  background: #ffffff;
  bottom:0.15rem;
  left: 50%;
  margin-left: -1.775rem;
  z-index: 20;
  border-radius: 0.2rem;
}
.dialog_boxa p{
  width: 100%;
  overflow: hidden;
}
.dialog_box_close{
  font-size: 0.14rem;
  margin-top: 0.17rem;

}
.dialog_box_close span{
  float: right;
  margin-right: 0.15rem;
}
.dialog_box_message{
  font-size: 0.16rem;
  text-align: center;
  margin-top: 0.15rem;
}
.dialog_box_message span{
  font-size: 0.2rem;
  color: #00C698;
}
.dialog_box_btn span{
  display: block;
  width: 1.625rem;
  font-size: 0.16rem;
  height: 0.44rem;
  background: #FF8C2D;
  color: #ffffff;
  line-height: 0.44rem;
  text-align: center;
  margin: 0.25rem auto 0;
  border-radius: 0.22rem;
}
.dialog_box_video{
  width: 1.32rem !important;
  margin: 0.2rem auto 0;
  font-size: 0.12rem;
}
.dialog_box_video img{
  width: 0.12rem;
  height: 0.13rem;
  float: left;
}
.dialog_box_video span{
  display: block;
  width: 1.1rem;
  float: left;
  color: #FF8C2D;
  margin-left: 0.05rem;
  text-align: center;
}
.dialog_install{
  position: fixed;
  width: 3.41rem;
  height:2.88rem;
  background: #ffffff;
  bottom:0.15rem;
  left: 50%;
  margin-left: -1.705rem;
  z-index: 20;
  border-radius: 0.1rem;
}
.dialog_install p{
  width: 100%;
  text-align: center;
}
.dialog_install_now{
  margin-top: 0.5rem;
}
.dialog_install_now img{
  width: 1.15rem;
  height: 0.19rem;
}
.dialog_install_progess{
  color: #666666;
  font-size: 0.14rem;
  margin-top: 0.12rem;
}
.dialog_install_msg{
  color: #FF2D2D;
  font-size: 0.16rem;
  margin-top: 0.4rem;
}
.dialog_install_btn span{
  display: block;
  width: 1.675rem;
  font-size: 0.15rem;
  height: 0.44rem;
  background: #DDDDDD;
  color: #666666;
  line-height: 0.44rem;
  text-align: center;
  margin: 0.25rem auto 0;
  border-radius: 0.22rem;
}
.dialog_install_udid{
  color: #999999;
  font-size: 0.14rem;
  margin-top: 0.2rem;
}
.video_box{
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 50;
}
.video_box p{
  color: #ffffff;
  font-size: 0.15rem;
  margin-top: 0.4rem;
  margin-left: 0.2rem;
}
.video_box video{
  position: absolute;
  width:100%;
  height: 3.8rem;
  margin-top: 0.75rem;
  z-index: 90;
}
.dialog_udid{
  position: fixed;
  width: 3.41rem;
  height:2.18rem;
  background: #ffffff;
  bottom:0.15rem;
  left: 50%;
  margin-left: -1.7rem;
  z-index: 20;
  border-radius: 0.1rem;
}
.dialog_udid_title{
  font-size:0.17rem;
  color: #00C698;
  width: 100%;
  text-align: center;
  margin-top: 0.59rem;
}
.dialog_udid_gif{
  width: 100%;
  overflow: hidden;
}
.dialog_udid_gif img{
  display: block;
  margin: 0.245rem auto 0;
  width: 1.16rem;
  height: 0.655rem;
}
.dialog_udid_msg{
  width: 100%;
  text-align: center;
  color: #999999;
  font-size: 0.17rem;
}
</style>
